<script setup lang="ts">
import { orderTypes } from "@/constants";
</script>

<template>
   <view class="orders">
      <view class="title">
         <text>我的订单</text>
         <navigator class="navigator" :url="`/subPackages/orderList/orderList?type=${0}`" hover-class="none">
            <text>查看全部订单</text>
            <text class="icon-right"></text>
         </navigator>
      </view>
      <view class="section">
         <!-- 订单 -->
         <navigator v-for="item in orderTypes" :key="item.type" :class="item.icon" :url="`/subPackages/orderList/orderList?type=${item.type}`" class="navigator" hover-class="none">{{ item.text }}</navigator>
         <!-- 客服 -->
         <button class="contact icon-handset" open-type="contact">售后</button>
      </view>
   </view>
</template>

<style scoped lang="scss">
.orders {
   position: relative;
   z-index: 99;
   padding: 30rpx;
   margin: 50rpx 20rpx 0;
   background-color: #fff;
   border-radius: 10rpx;
   box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

   .title {
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      color: #1e1e1e;

      .navigator {
         font-size: 24rpx;
         color: #939393;
         float: right;
      }
   }

   .section {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 40rpx 20rpx 10rpx;

      .navigator,
      .contact {
         text-align: center;
         font-size: 24rpx;
         color: #333;

         &::before {
            display: block;
            font-size: 60rpx;
            color: #ff9545;
         }
      }

      .contact {
         padding: 0;
         margin: 0;
         border: 0;
         background-color: transparent;
         line-height: inherit;
      }
   }
}
</style>